<template>
	<div class="inOutdiqu" ref='inOutdiqu'>
		<h2 class="titleSelf">{{thatYear}}年跨境出口国家和地区</h2>
		<div class="contentSelf">
			<div class="danwei">
				<span>占比：</span>
				<span>货值</span>
			</div>
			<div ref="inOutdiquChart" class="inOutdiquChart"></div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'inOutdiqu',
		components: {

		},
		data() {
			return {
				thatYear:new Date().getFullYear()-1,
			}
		},
		mounted() {
			var that = this;
			that.getEchartData()
			setInterval(function() {
				that.getEchartData()
			}, 30000)
		},
		methods: {
			// 千分位逗号隔开（,）that.commonFunction.formatNumberRgx(num)
			// 获取当前日期that.commonFunction.formatDate() 
			// 获取明天that.commonFunction.getTomorrowDate();

			// 当前日期的下个月that.commonFunction.getNextMonth()
			// 当前日期的前一个月that.commonFunction.getPreMonth()
			// 获取当前日期的前一年的年月日that.commonFunction.getLastYearYestdy() 
			getEchartData() {
				const inOutdiquChart = this.$refs.inOutdiquChart;
				if (inOutdiquChart) {
					const myChart = this.$echarts.init(inOutdiquChart)
					var that = this;
					var startDate = that.commonFunction.getLastYearYestdy()[0];
					// console.log(startDate)
					that.$myHttp.get("getIOMainAreaInfo", {
						params: {
							start: startDate ,
							end: startDate + 1,
							dtype: "Y"
						}
					}).then(function(data0) {
						if (data0.status == "200") {
							var data = [];
							var dataArr = data0.data.result.IOMainAreaData;
							var values = []


							dataArr.forEach(function(d) {
								var dd = {
									name: d.c_name,
									value: (d.cgv_zhanbi * 100).toFixed("2"),
									gv: d.c_gv
								};
								data.push(dd);
							});


							function sortValue(a, b) {
								return b.value - a.value
							}
							data.sort(sortValue);
							var qtArr = {};
							data.forEach(function(d,i) {
								if(d.name=="其它"){
									qtArr = {
										name: d.name,
										value: d.value,
										gv: d.gv
									};
									data.splice(i,1)
								}
							})
							// console.log(data)
							data.push( qtArr)
							console.log(data);
							// console.log("data>>>"+ JSON.stringify(data));
							var titleArr = [],
								seriesArr = [];
							var sCenter, TitleXy= {};
							var colors = [
								['#00ffef', '#333754'],
								['#ffca02', '#333754'],
								['#fb8737', '#333754'],
								['#ac48f0', '#333754']
							]


							data.forEach(function(item, index) {
								// if (index < 2) {
								// 	sCenter = [index * 35 + 30 + '%', '30%']
								// 	TitleXy = {
								// 		left: index * 35 + 30 + '%',
								// 		top: '52%'
								// 	}
								// } else {
								// 	sCenter = [(index - 2) * 35 + 14 + '%', '60%']
								// 	TitleXy = {
								// 		left: (index - 2) * 35 + 14 + '%',
								// 		top: '82%'
								// 	}
								// }
								sCenter = [index * 22 + 12 + '%', '50%']
								TitleXy = {
									left: index * 22 + 12 + '%',
									top: '10%'
								}
								 
								titleArr.push({
									text:item.name,
									left: TitleXy.left,
									top: TitleXy.top,
									textAlign: 'center',
									textStyle: {
										fontWeight: 'bold',
										fontSize: that.commonFunction.fontSize(0.16),
										color: colors[index][0],
										textAlign: 'center',
									},
									// subtext:(item.gv/10000).toFixed(0)+'(万元)',
									// subtextStyle: {
									// 	fontWeight: 'bold',
									// 	fontSize: that.commonFunction.fontSize(0.14),
									// 	color: '#fff',
									// 	textAlign: 'center',
										
									// }
								});
								
								seriesArr.push({
									name: item.name,
									type: 'pie',
									clockWise: false,
									radius: ['40%', '45%'],
									itemStyle: {
										normal: {
											color: colors[index][0],
											shadowColor: colors[index][0],
											shadowBlur: 0,
											label: {
												show: false
											},
											labelLine: {
												show: false
											},
										}
									},
									hoverAnimation: false,
									center: sCenter,
									data: [{
										value: item.value,
										label: {
											normal: {
												formatter: function(params) {
													// console.log(params)
													return params.value + '%'+'\n{dg|·}{txt|货值}'+'{wy|(万元)}\n'+'{hz|'+that.commonFunction.formatNumberRgx((item.gv/10000).toFixed(0))  +'}';
												},
												position: 'center',
												show: true,
												textStyle: {
													fontSize: that.commonFunction.fontSize(
														0.16),
													fontWeight: 'bold',
													color: colors[index][0]
												},
												rich: {
													dg:{
														color: [index][0],
														align: 'center',
														fontWeight: 'bold',
														fontSize: that.commonFunction.fontSize(0.26),
														padding:[-that.commonFunction.fontSize(1),that.commonFunction.fontSize(0.03),0,0],
													},
													txt: {
														color: [index][0],
														// color: '#36ffcb',
														align: 'center',
														fontWeight: 'bold',
														fontSize: that.commonFunction.fontSize(0.12),
														padding:[-that.commonFunction.fontSize(1),0,0,0],
													},
													wy: {
														color: [index][0],
														align: 'center',
														fontSize: that.commonFunction.fontSize(0.12),
														padding:[-that.commonFunction.fontSize(1),0,0,that.commonFunction.fontSize(0.02)],
													},
													hz:{
														color: '#fff',
														align: 'center',
														fontSize: that.commonFunction.fontSize(0.14),
														padding:[-that.commonFunction.fontSize(1.35),0,0,0],	
													}
												}
											}
										},
									}, {
										value: 100 - item.value,
										name: 'invisible',
										itemStyle: {
											normal: {
												color: colors[index][1]
											},
											emphasis: {
												color: colors[index][1]
											}
										}
									}]
								})
							});
							const option = {
								title: titleArr,
								series: seriesArr
							}
							myChart.setOption(option)
							window.addEventListener("resize", function() {
								myChart.resize()
							})
						} else {
							alert("数据请求错误")
						}

					}).catch(function(error) {
						alert(error)
					});
					// console.log(typeof data);
					// console.log(JSON.stringify(data));
				}
			}
		}
	}
</script>

<style scoped>
	.inOutdiqu {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.contentSelf {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.danwei {
		position: absolute;
		top: 0;
		right: 10%;
		display: flex;
		align-items: center;
		color: #07eee9;
		font-size: .14rem;
	}

	.inOutdiquChart {
		width: 100%;
		height: 100%;
	}
</style>
